import * as React from "react"
import { FeedContainer } from "../containers/feed-container"
import { AnimationClassNames, Icon, FocusTrapZone } from "@fluentui/react"
import ArticleContainer from "../containers/article-container"
import { ViewType } from "../schema-types"
import ArticleSearch from "./utils/article-search"

type PageProps = {
    menuOn: boolean
    contextOn: boolean
    settingsOn: boolean
    feeds: string[]
    itemId: number
    itemFromFeed: boolean
    viewType: ViewType
    dismissItem: () => void
    offsetItem: (offset: number) => void
}

class Page extends React.Component<PageProps> {
    offsetItem = (event: React.MouseEvent, offset: number) => {
        event.stopPropagation()
        this.props.offsetItem(offset)
    }
    prevItem = (event: React.MouseEvent) => this.offsetItem(event, -1)
    nextItem = (event: React.MouseEvent) => this.offsetItem(event, 1)

    render = () => this.props.viewType !== ViewType.List
    ? (
        <>
            {this.props.settingsOn ? null :
            <div key="card" className={"main" + (this.props.menuOn ? " menu-on" : "")}>
                <ArticleSearch />
                {this.props.feeds.map(fid => (
                    <FeedContainer viewType={this.props.viewType} feedId={fid} key={fid + this.props.viewType} />
                ))}
            </div>}
            {this.props.itemId && (
                <FocusTrapZone 
                    disabled={this.props.contextOn}
                    ignoreExternalFocusing={true}
                    isClickableOutsideFocusTrap={true}
                    className="article-container"
                    onClick={this.props.dismissItem}>
                    <div className="article-wrapper" onClick={e => e.stopPropagation()}>
                        <ArticleContainer itemId={this.props.itemId} />
                    </div>
                    {this.props.itemFromFeed && <>
                        <div className="btn-group prev"><a className="btn" onClick={this.prevItem}><Icon iconName="Back" /></a></div>
                        <div className="btn-group next"><a className="btn" onClick={this.nextItem}><Icon iconName="Forward" /></a></div>
                    </>}
                </FocusTrapZone>
            )}
        </>
    )
    : (
        <>
            {this.props.settingsOn ? null :
            <div key="list" className={"list-main" + (this.props.menuOn ? " menu-on" : "")}>
                <ArticleSearch />
                <div className="list-feed-container">
                    {this.props.feeds.map(fid => (
                        <FeedContainer viewType={this.props.viewType} feedId={fid} key={fid} />
                    ))}
                </div>
                {this.props.itemId 
                ? (
                    <div className="side-article-wrapper">
                        <ArticleContainer itemId={this.props.itemId} />
                    </div>
                )
                : (
                    <div className="side-logo-wrapper">
                        <img className="light" src="icons/logo-outline.svg" />
                        <img className="dark" src="icons/logo-outline-dark.svg" />
                    </div>
                )}
            </div>}
        </>
    )
}

export default Page